    // 接口文档：https://www.showdoc.com.cn/1834761734600444/8477923164668939

    // 功能列表
    // 功能1: 上传头像
    // 功能2: 页面初始化: 获取个人信息，并渲染到页面中
    // 功能3: 省市区的联动效果
    // 功能4: 保存个人信息，刷新页面，可以看到自己保存的个人信息
    //        说明：由于接口提供的是相同账号下的个人信息，所以当大家都在练习的时候，会出现互相覆盖的情况

    // 要求： 
    // 1. 使用 axios 发送请求
    // 2. 设置 axios 请求根路径
    // 3. 配合 async await 完成功能


    // 封装 获取元素对象 函数
    const qs = ele => document.querySelector(ele)
    // console.log(qs('.btn'));

    // 配置 axios 根路径
    axios.defaults.baseURL = 'http://ajax-api.itheima.net'



    // !   上传头像
    // 1.点击按钮，弹出文件选择框
    qs('img').addEventListener('click', () => {
        //  模拟点击
        qs('#upload').click()
    })

    // 2.用户选择头像上传后续逻辑
    qs('#upload').addEventListener('change', async function(){
          const file = this.files[0]
          // console.log(file);

          //若值为 undefined 表示用户没有选择图片  结束后续逻辑
          if(!file) return

          // 接口文档要求参数需要 FormDate 格式
          const fd = new FormData()
          fd.append('avatar', file)

          // 发生 axios 请求
          const {data:res} = await axios.post('/api/file', fd)
          // console.log(res);

          qs('img').src = res.data.url
    })



    // !     省市区的联动效果
   async function fn() {
      // todo    省 数据渲染逻辑
       const {data: {data:data1}} = await axios({
          url: '/api/province',
       })
      //  console.log(data1);

      // map 渲染数据
      const provinceStr = data1.map(item => `<option value="${item}">${item}</option>`).join('')
      // console.log(provinceStr);
      qs('[name=province]').innerHTML = '<option value="">--省--</option>' + provinceStr

      //!  获得个人信息的 axios 请求
      const {data: {data}} = await axios.get('/api/settings')
      // ! 注意  这里的 data 在 fn 函数内相当于局部的全局变量、所以下面的 市 区 调用 data, 无需再重新发送 axios 请求 
      console.log(data);

      // 用户名字
       qs('[name=nickname]').value = data.nickname
      
      // 图片
      qs('img').src = data.avatar

      // 用户自己选中 省 份
      qs('[name=province]').value = data.province




      // todo    城市 数据渲染逻辑
       const {data: {data:data2}} = await axios({
          url: '/api/city',
          params: {
            pname: data.province
          }
       })
      //  console.log(data2);

      // map 渲染数据
      const cityStr = data2.map(item => `<option value="${item}">${item}</option>`).join('')
      // console.log(cityStr);
      qs('[name=city]').innerHTML = '<option value="">--市--</option>' + cityStr


      // 用户自己选中的 城市
      qs('[name=city]').value = data.city




      // todo    县区 数据渲染逻辑
       const {data: {data:data3}} = await axios({
          url: '/api/area',
          params: {
            pname: data.province,
            cname: data.city
          }
       })
      //  console.log(data3);

      // map 渲染数据
      const areaStr = data3.map(item => `<option value="${item}">${item}</option>`).join('')
      // console.log(areaStr);
      qs('[name=area]').innerHTML = '<option value="">--区--</option>' + areaStr


      // 用户自己选中的 县区
      qs('[name=area]').value = data.area
   }

   fn()

   //todo       省 发生改变的时候，省下面的城市数据也对应改变    change
   qs('[name=province]').addEventListener('change', async function(){
      //   console.log(this.value);

      const {data: {data:data2}} = await axios({
         url: '/api/city',
         params: {
           pname: this.value
         }
      })
     //  console.log(data2);

     // map 渲染数据
     const cityStr = data2.map(item => `<option value="${item}">${item}</option>`).join('')
     // console.log(cityStr);
     qs('[name=city]').innerHTML = '<option value="">--市--</option>' + cityStr

   //   解决bug: 清空县区内容
   qs('[name=area]').innerHTML = '<option value="">--区--</option>'

   })

// todo     城市 发生改变的时候，城市下面的 区县 数据也对应改变  change
qs('[name=city]').addEventListener('change', async function(){
      // console.log(this.value);

      const {data: {data:data3}} = await axios({
         url: '/api/area',
         params: {
           pname: qs('[name=province]').value,
           cname: this.value
         }
      })
      console.log(data3);

     // map 渲染数据
     const areaStr = data3.map(item => `<option value="${item}">${item}</option>`).join('')
     // console.log(areaStr);
     qs('[name=area]').innerHTML = '<option value="">--区--</option>' + areaStr
})


    
// !  保存功能逻辑
qs('form').addEventListener('submit',async function(e){
   // 阻止表单默认提交
      e.preventDefault()

      const {data} = await axios({
         method: 'PUT',
         url: '/api/settings',
         data: {
            nickname: qs('[name=nickname]').value,
            province: qs('[name=province]').value,
            city: qs('[name=city]').value,
            area: qs('[name=area]').value,
            avatar: qs('img').src
         }
      })
      
   // 成功提示
      alert(data.message)
})

   






